<template>
	<view class="jj-loader flex-center">
		<view class="loader" :class="{ on: loadMoreStatus == 1 }"></view>
		{{ text[loadMoreStatus] }}
	</view>

	<!-- <view class="nothing" v-if="loadMoreStatus == 2">
		<image class="nothingimg" src="/static/images/gudidibuyimeiyou.png"></image>
	</view>
	<block v-else>
		<view class="jj-loader flex-center" v-if="shuaxin_ing == 0 ">
			<view class="loader" :class="{ on: loadMoreStatus == 1 || loadMoreStatus > 10 }"></view>
			{{ loadMoreStatus > 10 ? text[1] : text[loadMoreStatus] }}
		</view>
	</block> -->
</template>

<script>
import storeMixin from '@/store/storeMixin';
export default {
	mixins: [storeMixin],
	name: 'loading',
	props: {
		shuaxin_ing: {
			type: Number,
			default: 1,
		},
		loadMoreStatus: {
			type: Number,
			default: 0,
		},
		text: {
			type: Array,
			default() {
				return ['-我也是有底线的-', '正在加载中', '-我也是有底线的-'];
			},
		},
	},
	data() {
		return {};
	},
	created() {},
	methods: {},
};
</script>
<style lang="scss">
.nothing {
	height: 214rpx;
	position: relative;

	.nothingimg {
		position: absolute;
		left: 0;
		bottom: 0;
		width: 100%;
		height: 258rpx;
	}
}

.jj-loader {
	font-size: 28rpx;
	padding: 20rpx;
	color: #8d8d8d;

	.loader {
		width: 40rpx;
		height: 40rpx;
		display: none;
		margin-right: 10rpx;

		&.on {
			display: flex;
			align-items: center;
			justify-content: center;
		}

		&::before {
			display: block;
			content: '';
			width: 36rpx;
			height: 36rpx;
			animation: loader infinite 0.75s linear;
			border: 2rpx solid var(--primary-theme-color);
			border-top-color: transparent;
			border-radius: 100%;
		}
	}
}

@keyframes loader {
	0% {
		transform: rotate(0deg);
	}

	100% {
		transform: rotate(360deg);
	}
}
</style>
